<template>
	<view class="ccoupon mb10" v-if="ptype==1">
		<view class="bs10 p2 bf posi-r">
			<view class="dot1 bf"></view>
			<view class="dot2 bf"></view>
			<view class="f-bt pb20 b-be pt20">
				<view class="f-g-0 left f-c-c">
					<view class="f-c crb f-y-e l-h1" v-if="co.type==1">
						<text class="f20 wei">{{co.rule.money}}</text>
						<text class="ml5">元</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==2">
						<text class="f20 wei">{{co.rule.discount}}</text>
						<text class="ml5">折</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==3">
						<text class="f15">兑换商品</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==4">
						<text class="f15" v-if="co.rule.disContent==1">免配送费</text>
						<text class="f18" v-if="co.rule.disContent==3">立减{{co.rule.money}}元</text>
					</view>
					<view class="c9 mt10 f12">
						<span v-if="co.startSwitch==0">无限制</span>
						<span v-else-if="co.startSwitch==1">满{{co.startMoney && parseFloat(co.startMoney)}}元可用</span>
					</view>
				</view>
				<view class="f-g-1">
					<view class="wei f15 t-o-e">{{co.name}}</view>
					<view class="f12 c9 mt5" v-if="ttype==1 && co.timeArr && co.timeArr.startTime">
						{{co.timeArr.startTime.substring(0, 10)}} ~ {{co.timeArr.endTime.substring(0, 10)}}</view>
					<view class="f12 c9 mt5" v-else-if="ttype==2 && v.startTime">{{v.startTime.substring(0, 10)}} ~
						{{v.endTime.substring(0, 10)}}</view>
				</view>
			</view>
			<view class="p02 mt20">
				<view class="f-bt">
					<view class="f-g-0 flex f-y-c" @click="show=!show">
						<view class="c3 f26">使用规则</view>
						<view class="criel bsf ml10 f-c"><text class="iconfont icon-top c3 f11 fanz"
								:class="{'fanzz':show}"></text></view>
					</view>
					<view class="flex f-y-c">
						<view class="iconfont icon-erweima f40 c3 mr20 mt5" v-if="ttype==2 && co.verificationSwitch"
							@click="ewm"></view>
						<button @click.stop="zsClick" v-if="ttype==2 && co.regiftSwitch" class="coubtn f-c f11 clearbtn mr20"
							:style="{background:tColor}">赠送好友</button>
						<button @click.stop="btnClick" :disabled="disabled" class="coubtn f-c f11 clearbtn"
							:style="{background:tColor}">{{typeName.t}}</button>
					</view>
				</view>
				<view class='f26 lh40 mt10 c6' v-if="show">
					<view>优惠券ID：{{co.sn}} <text @click='fzID' class="ml10" :style="{color:tColor}">复制</text></view>
					<view v-if="co.type==3">兑换规则：
						<text v-if="co.rule.disType==1">优惠最高价</text>
						<text v-if="co.rule.disType==2">优惠最低价</text>
						<text v-if="co.rule.disType==3">优惠次高价</text>
					</view>
					<view>适用门店：
						<text v-if="co.storeType == 1">全部门店</text>
						<text v-else-if="co.storeType == 2">指定门店适用</text>
						<text v-else-if="co.storeType == 3">指定门店不适用</text>
						<!-- <text class="ml10" :style="{color:tColor}" v-if="co.storeType!=1" @click="goSelect">查看门店 ></text> -->
					</view>
					<view>适用商品：
						<text v-if="co.goodsType == 1">全部商品</text>
						<text v-else-if="co.goodsType == 2">指定商品适用</text>
						<text v-else-if="co.goodsType == 3">指定商品不适用</text>
						<!-- <text class="ml10" :style="{color:tColor}" v-if="co.goodsType!=1" @click="ckac(1)">查看商品 ></text> -->
					</view>
					<view>使用场景：
						<text v-if="co.scenario.includes(2)">自提,</text>
						<text v-if="co.scenario.includes(1)">外卖</text>
					</view>
					<view v-if="ttype==1">领取有效期：{{co.startTime}} ~ {{co.endTime}}</view>
					<view>使用有效期：
						<text v-if="co.period.type == 1">{{co.period.timeArr.startTime}} ~
							{{co.period.timeArr.endTime}}</text>
						<text v-if="co.period.type == 2">
							获得券{{ co.period.day.type == 1 ? "当日起" : "次日起" }}开始{{ co.period.day.value }}个自然日内有效</text>
						<text v-if="co.period.type == 3">
							获得券{{ co.period.hours.type == 1 ? "当日起" : "次日起" }}开始{{
							            co.period.hours.value
							          }}个小时内有效
						</text>
					</view>
					<view>优惠券说明：<block v-if="co.body">{{co.body}}</block>
					</view>
					<view v-if="ttype==2">优惠券来源：{{v.channelFormat}}</view>
				</view>
			</view>
			<view class="p-a couqlx cf t-c" :style="{background:qlx.c}">{{qlx.t}}</view>
			<view class="p-a counum cf t-c" v-if="ttype==2 && v.num>1">x{{v.num}}</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popCode bs10">
				<view class="code">
					<image :src="cCode" class="wh" mode="widthFix" v-if="cCode"></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupShare" type="center">
			<view class="popShare bs10">
				<view class="wei f40 f-c">提示</view>
				<view class="mt30 f-c">{{cpName}}</view>
				<view class="f-c">
					<button class="cf xzhy f-c bs10 f15" open-type="share" @click="fxhy"
						:style="{background:tColor}">选择好友</button>
				</view>
			</view>
		</uni-popup>
	</view>
	<view class="ccoupon mb10" v-else-if="ptype==2">
		<view class="bs10 p2 bf posi-r" @click="co.isUse!=1?$emit('change',v.id):''">
			<view class="f-bt pb20 pt20">
				<view class="f-g-0 left f-c-c">
					<view class="f-c crb f-y-e l-h1" v-if="co.type==1">
						<text class="f20 wei">{{co.rule.money}}</text>
						<text class="ml5">元</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==2">
						<text class="f20 wei">{{co.rule.discount}}</text>
						<text class="ml5">折</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==3">
						<text class="f15">兑换商品</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==4">
						<text class="f15" v-if="co.rule.disContent==1">免配送费</text>
						<text class="f18" v-if="co.rule.disContent==3">立减{{co.rule.money}}元</text>
					</view>
					<view class="c9 mt10 f12">
						<span v-if="co.startSwitch==0">无限制</span>
						<span v-else-if="co.startSwitch==1">满{{co.startMoney && parseFloat(co.startMoney)}}元可用</span>
					</view>
				</view>
				<view class="f-g-1">
					<view class="wei f15 t-o-e">{{co.name}}</view>
					<view class="f12 c9 mt5" v-if="ttype==1">{{co.timeArr.startTime}} ~ {{co.timeArr.endTime}}</view>
					<view class="f12 c9 mt5" v-else-if="ttype==2">{{v.startTime}} ~ {{v.endTime}}</view>
					<!-- <view class="f12 mt5" :style="{color:tColor}">距离过期仅剩2天</view> -->
				</view>
				<view class="f-g-0 f-c">
					<radio color="#FDDA34" v-if="co.isUse!=1" :checked="v.checked" />
				</view>
			</view>
			<view class="p-a couqlx cf t-c" :style="{background:qlx.c}">{{qlx.t}}</view>
			<view class="p-a counum cf t-c" v-if="ttype==2 && v.num>1">x{{v.num}}</view>
		</view>
	</view>
	<view class="ccoupon mb10" v-else-if="ptype==3">
		<view class="bs10 p2 bf posi-r">
			<view class="f-bt pb20 pt20 b-be">
				<view class="f-g-0 left f-c-c">
					<view class="f-c crb f-y-e l-h1" v-if="co.type==1">
						<text class="f20 wei">{{co.rule.money}}</text>
						<text class="ml5">元</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==2">
						<text class="f20 wei">{{co.rule.discount}}</text>
						<text class="ml5">折</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==3">
						<text class="f15">兑换商品</text>
					</view>
					<view class="f-c crb f-y-e l-h1" v-else-if="co.type==4">
						<text class="f15" v-if="co.rule.disContent==1">免配送费</text>
						<text class="f18" v-if="co.rule.disContent==3">立减{{co.rule.money}}元</text>
					</view>
					<view class="c9 mt10 f12">
						<span v-if="co.startSwitch==0">无限制</span>
						<span v-else-if="co.startSwitch==1">满{{co.startMoney && parseFloat(co.startMoney)}}元可用</span>
					</view>
				</view>
				<view class="f-g-1">
					<view class="wei f15 t-o-e c9">{{co.name}}</view>
					<view class="f12 c9 mt5 c9">{{co.timeArr.startTime}} ~ {{co.timeArr.endTime}}</view>
				</view>
			</view>
			<view class="p2">
				<view class="cfa f11"><text class="iconfont icon-tishi cfa f28 mr10"></text>不可用原因</view>
				<view class="f11 c9 mb10 mt5" v-for="(v,i) in v.msg" :key='i'>{{v}}</view>
			</view>
			<view class="p-a couqlx cf t-c" :style="{background:qlx.c}">{{qlx.t}}</view>
			<view class="p-a counum cf t-c" v-if="v.num>1">x{{v.num}}</view>
		</view>
	</view>
	<view class="ccoupon mb10" v-else-if="ptype==4">
		<view class="bs10 p2 bf posi-r">
			<view class="f-bt pb20 pt20 b-be">
				<view class="f-g-0 left f-c-c">
					<view class="f-c c9 f-y-e l-h1" v-if="co.type==1">
						<text class="f20 wei">{{co.rule.money}}</text>
						<text class="ml5">元</text>
					</view>
					<view class="f-c c9 f-y-e l-h1" v-else-if="co.type==2">
						<text class="f20 wei">{{co.rule.discount}}</text>
						<text class="ml5">折</text>
					</view>
					<view class="f-c c9 f-y-e l-h1" v-else-if="co.type==3">
						<text class="f15">兑换商品</text>
					</view>
					<view class="f-c c9 f-y-e l-h1" v-else-if="co.type==4">
						<text class="f15" v-if="co.rule.disContent==1">免配送费</text>
						<text class="f18" v-if="co.rule.disContent==3">立减{{co.rule.money}}元</text>
					</view>
					<view class="c9 mt10 f12">
						<span v-if="co.startSwitch==0">无限制</span>
						<span v-else-if="co.startSwitch==1">满{{co.startMoney && parseFloat(co.startMoney)}}元可用</span>
					</view>
				</view>
				<view class="f-g-1">
					<view class="wei f15 t-o-e c9">{{co.name}}</view>
					<view class="f12 c9 mt5 c9" v-if="co.timeArr && co.timeArr.startTime">
						{{co.timeArr.startTime.substring(0, 10)}} ~ {{co.timeArr.endTime.substring(0, 10)}}</view>
				</view>
			</view>
			<view class="p02 mt20">
				<view class="f-bt">
					<view class="f-g-0 flex f-y-c" @click="show=!show">
						<view class="c3 f26">使用规则</view>
						<view class="criel bsf ml10 f-c"><text class="iconfont icon-top c3 f11 fanz"
								:class="{'fanzz':show}"></text></view>
					</view>
				</view>
				<view class='f26 lh40 mt10 c6' v-if="show">
					<view>适用门店：
						<text v-if="co.storeType == 1">全部门店</text>
						<text v-else-if="co.storeType == 2">指定门店适用</text>
						<text v-else-if="co.storeType == 3">指定门店不适用</text>
						<!-- <text class="ml10" :style="{color:tColor}" v-if="co.storeType!=1" @click="goSelect">查看门店 ></text> -->
					</view>
					<view>适用商品：
						<text v-if="co.goodsType == 1">全部商品</text>
						<text v-else-if="co.goodsType == 2">指定商品适用</text>
						<text v-else-if="co.goodsType == 3">指定商品不适用</text>
						<!-- <text class="ml10" :style="{color:tColor}" v-if="co.goodsType!=1" @click="ckac(1)">查看商品 ></text> -->
					</view>
					<view>使用场景：
						<text v-if="co.scenario.includes(2)">自提,</text>
						<text v-if="co.scenario.includes(1)">外卖</text>
					</view>
					<!-- <view v-if="ttype==1">领取有效期：{{co.startTime}} ~ {{co.endTime}}</view> -->
					<!-- <view>使用有效期：
						<text v-if="co.period.type == 1">{{co.period.timeArr.startTime}} ~
							{{co.period.timeArr.endTime}}</text>
						<text v-if="co.period.type == 2">
							获得券{{ co.period.day.type == 1 ? "当日起" : "次日起" }}开始{{ co.period.day.value }}个自然日内有效</text>
						<text v-if="co.period.type == 3">
							获得券{{ co.period.day.type == 1 ? "当日起" : "次日起" }}开始{{
							            co.period.day.value
							          }}个小时内有效
						</text>
					</view> -->
					<view>优惠券说明：<block v-if="co.body">{{co.body}}</block>
					</view>
					<view v-if="ttype==2">优惠券来源：{{v.channelFormat}}</view>
				</view>
			</view>
			<view class="p-a couqlx cf t-c" :style="{background:qlx.c}">{{qlx.t}}</view>
			<view class="p-a counum cf t-c" v-if="v.num>1">x{{v.num}}</view>
		</view>
	</view>
	<view class="ccoupon mb10" v-else-if="ptype==5">
		<view class="bs10 p2 bf posi-r">
			<view class="f-bt pb20 pt20">
				<view class="f-g-0 left f-c-c">
					<view class="f-c cf5f f-y-e l-h1" v-if="co.type==1">
						<text class="f20 wei">{{co.rule.money}}</text>
						<text class="ml5">元</text>
					</view>
					<view class="f-c cf5f f-y-e l-h1" v-else-if="co.type==2">
						<text class="f20 wei">{{co.rule.discount}}</text>
						<text class="ml5">折</text>
					</view>
					<view class="f-c cf5f f-y-e l-h1" v-else-if="co.type==3">
						<text class="f15">兑换商品</text>
					</view>
					<view class="f-c cf5f f-y-e l-h1" v-else-if="co.type==4">
						<text class="f15" v-if="co.rule.disContent==1">免配送费</text>
						<text class="f18" v-if="co.rule.disContent==3">立减{{co.rule.money}}元</text>
					</view>
					<view class="c9 mt10 f12">
						<span v-if="co.startSwitch==0">无限制</span>
						<span v-else-if="co.startSwitch==1">满{{co.startMoney && parseFloat(co.startMoney)}}元可用</span>
					</view>
				</view>
				<view class="f-g-1">
					<view class="wei f15 t-o-e c3">{{co.name}}</view>
					<view class="f12 mt5 c9" v-if="co.timeArr && co.timeArr.startTime">
						{{co.timeArr.startTime.substring(0, 10)}} ~ {{co.timeArr.endTime.substring(0, 10)}}</view>
				</view>
			</view>
			<view class="p-a couqlx cf t-c" :style="{background:qlx.c}">{{qlx.t}}</view>
			<view class="p-a counum cf t-c" v-if="v.num>1">x{{v.num}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		name: 'coupon',
		components: {

		},
		props: {
			v: {
				type: Object,
				default: function() {
					return {}
				}
			},
			co: {
				type: Object,
				default: function() {
					return {}
				}
			},
			gttype: {
				type: String,
				default: ''
			},
			ptype: { //样式类型 1领券中心,我的券,2/可使用券3不可使用券、4、已使用券已过期/5优惠券显示
				type: String,
				default: '1'
			},
			ttype: { //文字类型 1领券中心2我的券
				type: String,
				default: '1'
			},
			cname: {
				type: String,
				default: ''
			},
			u: {
				type: String,
				default: 'px'
			},
			color: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				show: false,
				active: false,
				disabled: false,
				cCode: '',
				cpName: '',
			}
		},
		computed: {
			typeName() {
				let t, c = ''
				switch (this.ptype) {
					case '1':
						if (this.ttype == 1) {
							t = '立即领取'
							c = 'linear-gradient(90deg, #ff3a48, #ff3a48)'
						} else {
							t = '去使用'
							c = 'linear-gradient(90deg, #ff3a48, #ff3a48)'
						}
						break;
					default:
						break;
				}
				return {
					t,
					c
				}
			},
			qbbl() {
				return this.co.saleNum / this.co.totalNum >= 1 ? 1 : this.co.saleNum / this.co.totalNum
			},
			qlx() {
				let t, c = ''
				switch (this.co.type) {
					case 1:
						t = '代'
						c = '#136FFE'
						break;
					case 2:
						t = '折'
						c = '#67C23A'
						break;
					case 3:
						t = '兑'
						c = '#FF4046'
						break;
					case 4:
						t = '运'
						c = '#FFAF24'
						break;
					default:
						break;
				}
				return {
					t,
					c
				}
			},
			iswdq() {
				return this.ttype == 2 && this.co.receiveType == 13
			},
		},
		methods: {
			goTo() {
				let url = '/pages/my/coupon/coupon-dl?id=' + (this.co.couponId ? this.co.couponId : this.co.id)
				if (this.ptype == 1 && this.ttype == 2 || this.ptype == 4) {
					url = '/pages/my/coupon/coupon-dl?islq=1&receiveId=' + this.co.id
				} else if (this.ptype == 8) {
					url = '/pages/order/coupon-bag/qbxq?id=' + this.co.id
				}
				this.go({
					t: 1,
					url,
				})
			},
			btnClick() {
				if (this.typeName.c) {
					if (this.ptype == 1 && this.ttype == 1) {
						// console.log(this.co)
						this.disabled = true
						setTimeout(() => {
							this.disabled = false
						}, 1000)
						this.$emit('btntap')
					} else if (this.ptype == 1 && this.ttype == 2) {
						this.go({
							t: 6,
							url: '/pages/index/goods'
						})
					}

				}
			},
			async zsClick() {
				this.cpName = `确定赠送[${this.co.name}]优惠券?`
				this.$emit('fx', this.v)
				this.$refs['popupShare'].open()
			},
			async fxhy() {
				await this.util.request({
					'url': this.api.yhqzz,
					'method': 'POST',
					data: {
						id: this.v.id
					}
				})
				setTimeout(() => {
					this.$emit('rf', 0)
					this.$refs['popupShare'].close()
				}, 1000)
			},
			fzID() {
				let id = this.co.sn.toString()
				this.util.fz(id)
			},
			async ewm() {
				let {
					data
				} = await this.util.request({
					'url': `${this.api.cCode}/${this.v.id}`
				})
				if (data) {
					this.cCode = data
					this.$refs['popup'].open()
				}
			},
			ckac(type) {
				return
				this.go({
					t: 1,
					url: `/pages/shop/seeGoods?type=${type}`
				})
			},
			goSelect() {
				return
				uni.navigateTo({
					url: '/pages/shop/select/index?page=recharge'
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.ccoupon {

		.dot1,
		.dot2 {
			position: absolute;
			width: 30rpx;
			height: 15rpx;
			background: #f7f7f7;
		}

		.dot1 {
			left: -8rpx;
			top: 156rpx;
			border-radius: 0 0 30px 30px;
			border-top: 0;
			transform: rotateZ(-90deg);
		}

		.dot2 {
			right: -8rpx;
			top: 156rpx;
			border-radius: 30px 30px 0 0;
			transform: rotateZ(-90deg);
			border-bottom: 0;
		}

		.left {
			width: 30%;
		}

		.qsy {
			width: 130rpx;
			height: 56rpx;
		}

		.criel {
			width: 36rpx;
			height: 36rpx;
			background: #eee;
		}

		.fanz {
			transform: rotateZ(180deg);
		}

		.fanzz {
			transform: rotateZ(0deg);
		}

		.lh40 {
			line-height: 48rpx;
		}
	}

	.coubtn {
		min-width: 130rpx;
		height: 56rpx;
		color: #fff;
		background: #DDD;
		border-radius: 30rpx;
	}

	.couqlx {
		top: 0;
		left: -50rpx;
		width: 100rpx;
		height: 45rpx;
		font-size: 18rpx;
		line-height: 52rpx;
		background: linear-gradient(#ff3a48, #ff3a48);
		transform: rotate(-45deg);
		transform-origin: 50% 0%;
		text-align: center;
	}

	.counum {
		top: 0;
		right: -50rpx;
		width: 100rpx;
		height: 45rpx;
		font-size: 20rpx;
		line-height: 52rpx;
		background: linear-gradient(#ff3a48, #ff3a48);
		transform: rotate(45deg);
		transform-origin: 50% 0%;
	}

	.popCode,
	.popShare {
		padding: 100rpx;
		position: relative;
		background: #fff;

		.code {
			width: 400rpx;
			height: 400rpx;
		}

		.xzhy {
			width: 400rpx;
			height: 90rpx;
			margin-top: 60rpx;
		}
	}
</style>